/* eslint-disable react/jsx-key */
import citycode from '@/assets/citycode.json';
import { SUCCESS_CODE } from '@/utils/request';
import { Drawer, message, Spin, Image, Row, Col } from 'antd';
import { useEffect, useState } from 'react';
import { useModel } from 'umi';
import { getTemplateDetail } from '../service';
import styles from '../style.less';
import type { getTemplateDetails } from '../types';
interface ParkProps {
  id: string;
  visible: boolean;
  onClose: () => void;
}

export default (props: ParkProps) => {
  const STATUS_MAP = new Map().set(3, '车位不足').set(2, '车位紧张').set(1, '车位充足');
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const isAdmin = currUser?.type === 1;

  const { visible, onClose, id } = props;
  const [template, settemplate] = useState<getTemplateDetails>();
  const [loading, setLoading] = useState<boolean>(false);
  const [parkUrls, setParkUrls] = useState<string[]>([]);

  useEffect(() => {
    setLoading(true);
    getTemplateDetail(id).then((res) => {
      if (res.code === SUCCESS_CODE) {
        settemplate(res.data);
        return true;
      }
      message.error('获取详情失败');
      return false;
    });
  }, [id]);

  return (
    <Drawer
      title="停车场详情"
      placement="right"
      width="360"
      onClose={() => {
        onClose();
      }}
      open={visible}
    >
      <Spin spinning={loading}>
        <div className={styles.DrawerDetails}>
          <div>基本信息：</div>
          <p>批次码{template?.code || '-'}</p>
          <p>优惠券名称：{template?.title || '-'}</p>
          <p>子标题：{template?.subTitle}</p>
          <p>优惠券数量：{template?.count || '-'}</p>
          <p>优惠类型{template?.typeConfig || '-'}</p>
          <p>固定减免：{template?.count || '-'}</p>
          <p>折扣减免：{template?.count || '-'}</p>
          <p>使用说明{template?.comment || '-'}</p>

          <div>基本规则：</div>
          <p>
            每人限领数量：
            {template?.space_total_count >= 0 ? template?.space_total_count : '-'}
          </p>
          <p>运营时间：{template?.open_time || '-'}</p>
          <p>计费规则：{template?.scheme ? template?.scheme.name || '-' : '-'}</p>
          <p>状态：{STATUS_MAP.get(template?.space_full_status) || '-'}</p>
        </div>
      </Spin>
    </Drawer>
  );
};
